<!-- @format -->

<template>
  <div class="input-div">
    <div class="label" v-if="labelName" :style="{ 'font-size': fontSize }">
      <span v-show="required" style="color: red">*</span>
      {{ labelName }}：
    </div>
    <el-input ref="nuInput" v-bind="$attrs" v-on="$listeners" @input="enterChange" @change="blurs">
      <template ref="prefix" slot="prefix">
        <slot name="prefix"></slot>
      </template>
      <template slot="suffix">
        <slot name="suffix"></slot>
      </template>
      <template slot="prepend">
        <slot name="prepend"></slot>
      </template>
      <template slot="append">
        <slot name="append"></slot>
      </template>
    </el-input>
    <div class="errMsg" :style="{ top: topPX }" v-show="errMsg != ''">{{ errMsg }}</div>
  </div>
</template>

<script>
// import '../../src/assets/admin.css'
import verifyMethods from './verifyMethods.js';
let timeOut;
export default {
  name: 'verify-input',
  created() {
    //判断是否必填项
    this.required = this.verifys.split('|').includes('required');
  },
  mounted() {
    console.log(this.$attrs);
    // 根据尺寸类型生成尺寸
    switch (this.$attrs.size) {
      case 'large':
        // this.$refs.nuInput.$el.style.height = '42px'
        this.topPX = '42px';
        this.fontSize = '18px';
        // var x = document.getElementsByClassName('el-input__icon')
        // var i
        // for (i = 0; i < x.length; i++) {
        //   x[i].style['line-height'] = '42px'
        // }
        break;
      case 'middle':
        // this.$refs.nuInput.$el.style.height = '32px'
        this.topPX = '32px';
        this.fontSize = '16px';
        // var x = document.getElementsByClassName('el-input__icon')
        // var i
        // for (i = 0; i < x.length; i++) {
        //   x[i].style['line-height'] = '32px'
        // }
        break;
      case 'small':
        // this.$refs.nuInput.$el.style.height = '28px'
        this.topPX = '28px';
        this.fontSize = '14px';
        // var x = document.getElementsByClassName('el-input__icon')
        // var i
        // for (i = 0; i < x.length; i++) {
        //   x[i].style['line-height'] = '28px'
        // }
        break;
      case 'mini':
        // this.$refs.nuInput.$el.style.height = '24px'
        this.topPX = '24px';
        this.fontSize = '12px';
        // var x = document.getElementsByClassName('el-input__icon')
        // var i
        // for (i = 0; i < x.length; i++) {
        //   x[i].style['line-height'] = '24px'
        // }
        break;
      default:
        // this.$refs.nuInput.$el.style.height = '42px'
        this.topPX = '42px';
        // var x = document.getElementsByClassName('el-input__icon')
        // var i
        // for (i = 0; i < x.length; i++) {
        //   x[i].style['line-height'] = '42px'
        // }
        break;
    }
  },
  data() {
    return {
      required: false, //是否必填
      errMsg: '', //提示信息
      topPX: '42px', //提示框下移高度
      fontSize: '18px',
    };
  },
  props: {
    //尺寸
    // size: {
    //   type: String,
    //   default: () => 'large',
    // },
    //校验规则
    verifys: {
      type: String,
      default: '',
    },
    //标题
    labelName: {
      type: String,
      default: '',
    },
  },
  methods: {
    //监控数值变化，1.5秒后如果输入不通过校验则提示
    enterChange(value) {
      if (this.verifys) {
        clearTimeout(timeOut);
        timeOut = setTimeout(() => {
          this.errMsg = verifyMethods(this.verifys, value);
        }, 1500);
      }
    },
    // 失去焦点后进行校验
    blurs(value) {
      if (this.verifys) {
        this.errMsg = verifyMethods(this.verifys, value);
      }
    },
  },
};
</script>
<style scoped>
.el-input {
  /* width: 150px !important; */
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%) !important;
}
.el-input {
  min-width: 120px;
  width:"auto";
}
::v-deep .el-input__inner {
  border: var(--input-border) !important;
  background-color: var(--input-bgc);
  color: var(--input-color);
}
::v-deep .el-input-group__prepend {
  background-color: var(--input-bgc);
  color: var(--input-color);
}
.input-div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 240px;
  max-width: 400px;
  flex-wrap: wrap;
}
.label {
  display: inline-block;
  /* padding: 0px 10px; */
  vertical-align: middle;
  white-space: nowrap;
  color: var(--input-color);
}
.errMsg {
  /* position: absolute; */
  color: red;
  font-size: 8px;
  width: 100%;
}
</style>
